<template>
  <div class="ele-body">

    <el-card shadow="never" v-loading="loading" style="min-height: calc(100vh - 130px)">
      <template v-slot:header>
        <el-form :inline="true">
          <el-form-item style="margin-bottom: 0">
            <el-select v-model="id" placeholder="查看具体项目" @change="queryData" clearable>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-button type="primary" @click="onExport(id)">导出</el-button>
          </el-form-item>
        </el-form>
      </template>

      <ReportTable :m-date="MDate" :table-data="tableData"/>
    </el-card>
  </div>
</template>

<script>
import ReportTable from "@/views/project/gantt/components/report-table.vue";

export default {
  name: "index",
  components: {
    ReportTable
  },
  data() {
    return {
      loading: false,
      tableData: [],
      options: [],
      MDate: [],
      id: null,
    }
  },
  watch: {
    $route(current) {
      if (current.name === '/project/gantt') {
        this.id = +this.$route.query.id || null
        this.queryData(this.id)
      }
    },
  },
  mounted() {
    this.id = +this.$route.query.id || null
    this.queryData(this.id)
    this.queryProjectList().catch(error => this.$message.error(error))
  },
  methods: {
    //获取甘特图数据
    async queryData(id) {
      this.loading = true
      const res = (await this.$http.get('/projects/type_tasks', {params: {project_id: id}})).data
      res.success ? (() => {
        this.tableData = res.data.projects;
        this.MDate = this.calculateData(res.data.first_start_at, res.data.latest_complete_at)
      })() : this.$message.error(res.msg)
      this.loading = false
    },
    //获取项目选择框数据
    async queryProjectList() {
      const res = (await this.$http.get(`/projects/gantt/projects?is_pc=1`)).data
      res.success ? this.options = res.data : this.$message.error(res.msg);
    },

    calculateData(fDate, lDate) {
      if (!(fDate && lDate)) return []
      let fs = new Date(fDate)
      let ls = new Date(lDate)
      const dateList = []
      let flag = true
      while (flag) {
        dateList.push(`${fs.getFullYear()}-${fs.getMonth() + 1 < 10 ? '0' + (fs.getMonth() + 1) : fs.getMonth() + 1}-${fs.getDate() < 10 ? '0' + fs.getDate() : fs.getDate()}`)
        fs.setDate(fs.getDate() + 1)
        if (fs.getTime() > ls.getTime()) {
          flag = false
        }
      }
      return dateList
    },

    onExport(id) {
      this.$http.get("/projects/type_tasks", {
        params: {
          // project_id:id,
          export: 1,
          export_ids: id,
        }
      }).then(({data}) => {
        if (data.code === 0) {
          const link = document.createElement('a')
          //_blank表示在新窗口打开链接
          // link.target = '_blank'
          link.href = data.data
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }else{
          this.$message.error(data.msg)
        }
      })
    },
  },
}

</script>

<style scoped>

</style>
